import { PageContainer, ProCard } from '@ant-design/pro-components';
import React, { useState } from 'react';

import { LikeOutlined, SendOutlined, UserOutlined } from '@ant-design/icons';
import type { GetProps, TabsProps } from 'antd';
import {
  Alert,
  Avatar,
  Button,
  Calendar,
  Card,
  Col,
  Empty,
  Input,
  Row,
  Statistic,
  Tabs,
  Tag,
} from 'antd';
import { createStyles } from 'antd-style';

const useStyles = createStyles(() => {
  return {
    shell: {
      height: '13.75rem',
    },
  };
});

const Home: React.FC = () => {
  type SearchProps = GetProps<typeof Input.Search>;

  const { styles } = useStyles();
  const { Search } = Input;
  const { Meta } = Card;

  const [articleList] = useState<any>([]);

  const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value);
  const onChange = (key: string) => {
    console.log(key);
  };

  const getArticleListNode = () => {
    if (articleList.length === 0) {
      return <Empty className={styles.shell} image={Empty.PRESENTED_IMAGE_SIMPLE} />;
    }
    return (
      <div className={styles.shell}>
        {articleList.map((item, index) => {
          return (
            <Card
              key={index}
              hoverable
              style={{ width: 200 }}
              cover={
                <img
                  alt="example"
                  src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                />
              }
            >
              <Meta title={item.title} description={item.desc} />
            </Card>
          );
        })}
      </div>
    );
  };

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '社区精选',
      children: getArticleListNode(),
    },
    {
      key: '2',
      label: '我发布的',
      children: getArticleListNode(),
    },
    {
      key: '3',
      label: '私有文章',
      children: getArticleListNode(),
    },
    {
      key: '4',
      label: '草稿箱',
      children: getArticleListNode(),
    },
  ];

  return (
    <PageContainer>
      <Alert icon={<LikeOutlined />} message="新人保护期" type="warning" showIcon closable />
      <br />
      <ProCard>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Avatar style={{ marginRight: '10px' }} size={64} icon={<UserOutlined />} />
            <div>
              <div
                style={{
                  fontSize: '20px',
                  fontWeight: 600,
                  marginBottom: '6px',
                }}
              >
                <span style={{ marginRight: '6px' }}>狗屎甲方</span>
                <Tag color="magenta">超级管理员</Tag>
              </div>
              <div style={{ fontSize: '14px', color: '#444' }}>今天是你来到工坊的</div>
            </div>
          </div>
          <Statistic valueStyle={{ textAlign: 'end' }} title="今天是你来到工坊的" value={'第1天'} />
        </div>
      </ProCard>
      <br />
      <Row gutter={20}>
        <Col span={18}>
          <ProCard>
            <Tabs
              style={{ height: '13.75rem' }}
              tabBarExtraContent={
                <>
                  <Search placeholder="input search text" onSearch={onSearch} enterButton />
                </>
              }
              defaultActiveKey="1"
              items={items}
              onChange={onChange}
            />
            <>
              {articleList.map((item, index) => {
                return (
                  <Card
                    key={index}
                    hoverable
                    style={{ width: 200 }}
                    cover={
                      <img
                        alt="example"
                        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                      />
                    }
                  >
                    <Meta title={item.title} description={item.desc} />
                  </Card>
                );
              })}
            </>
          </ProCard>
        </Col>
        <Col span={6}>
          <ProCard>
            <Calendar fullscreen={false} />
            <Button icon={<SendOutlined />} block type="primary">
              发布文章签到
            </Button>
          </ProCard>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default Home;
